<!DOCTYPE HTML>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <head>
        <title>首页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <link rel="stylesheet" href="./lib/vant/index.css">
        <script src="./lib/vant/vant.min.js"></script>
        <style type="text/css">
            body {
                background-color: #f7f8fa;
            }
            .device-info > li {
                margin-top: 10px;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <van-nav-bar title="首页"></van-nav-bar>
                <div style="padding: 5px 10px;">
                    <van-grid :gutter="10" :column-num="2">
                        <van-grid-item v-for="device in devices" :key="device.id" @click="toControlPage(device)">
                            <ul class="device-info">
                                <li>
                                    名称: {{ device.id }}
                                </li>
                                <li>
                                    状态:
                                    <van-tag v-if="device.status === 1" type="success">在线</van-tag>
                                    <van-tag v-if="device.status === 0" type="danger">离线</van-tag>
                                </li>
                            </ul>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    message: 'hello world!',
                    devices: []
                },
                mounted () {
                    this.init();
                },
                methods: {
                    init () {
                        setInterval(() => this.queryDevices(), 1500);
                        this.queryDevices();
                    },

                    queryDevices () {
                        $.getJSON('/api/devices', data => {
                            if(!Array.isArray(data)) {
                                return;
                            }

                            this.devices = [];

                            data.forEach(device => {
                                this.devices.push(device);
                            });
                        });
                    },

                    toControlPage (device) {
                        if(device.status == 0) {
                            this.$notify({ type: 'warning', message: '设备未在线' });
                            return;
                        }
                        window.location.href = "./control.html?id=" + device.id;
                    }
                }
            });
        </script>
    </body>
</html>